<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<!--[if lt IE 9]>
<script type="text/javascript" src="lib/html5.js"></script>
<script type="text/javascript" src="lib/respond.min.js"></script>
<script type="text/javascript" src="lib/PIE_IE678.js"></script>
<![endif]-->
<link href="css/H-ui.min.css" rel="stylesheet" type="text/css" />
<link href="css/H-ui.admin.css" rel="stylesheet" type="text/css" />
<link href="lib/icheck/icheck.css" rel="stylesheet" type="text/css" />
<link href="lib/Hui-iconfont/1.0.1/iconfont.css" rel="stylesheet"
	type="text/css" />
<!--[if IE 6]>
<script type="text/javascript" src="lib/DD_belatedPNG_0.0.8a-min.js" ></script>
<script>DD_belatedPNG.fix('*');</script>
<![endif]-->
<script src="js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="js/ajaxfileupload.js"></script>
<script type="text/javascript" src="lib/My97DatePicker/WdatePicker.js"></script>

<link rel="stylesheet" href="kindeditor/themes/default/default.css" />
<link rel="stylesheet" href="lib/bootstrapSwitch/bootstrapSwitch.css" />
<script charset="utf-8" src="kindeditor/kindeditor-min.js"></script>
<script charset="utf-8" src="kindeditor/lang/zh_CN.js"></script>
<script charset="utf-8" src="lib/bootstrapSwitch/bootstrapSwitch.js"></script>
<script>
	var editor;
	KindEditor.ready(function(K) {
		editor = K.create('textarea[name="goods_detail"]', {
			resizeType : 1,
			allowPreviewEmoticons : false,
			allowImageUpload : true,
			afterBlur : function() {
				this.sync();
			},
			items : [
				'source', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline',
				'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist',
				'insertunorderedlist', '|', 'emoticons', 'image', 'multiimage', 'link', 'fullscreen' ]
		});
	});



	/*$(function(){
	//装逼失败
		$('#is_recommend').bootstrapSwitch({
			onText:"启动",
			offText:"停止",
			onColor:"success",
			offColor:"info",
			size:"small",
			onSwitchChange:function(event,state){
				alert('1');
				if(state==true){
					$(this).val(1);
				}else{
					$(this).val(0);
				}
			}

		});
	});*/



</script>
<title>添加商品</title>

</head>
<body>
	<nav class="breadcrumb">
		<i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span>
		商品 <span class="c-gray en">&gt;</span> <a
			class="btn btn-success radius r mr-20"
			style="line-height: 1.6em; margin-top: 3px"
			href="javascript:location.replace(location.href);" title="刷新"><i
			class="Hui-iconfont">&#xe68f;</i></a>
	</nav>
	<br>
	<br>
	<div class="pd-20" style="width: 80%">
<form id="form" method="post" enctype="multipart/form-data">
		<div class="row cl">

			<label class="form-label col-2">名称：</label>
			<div class="formControls col-10">
				<input type="text" id="goods_name" name="goods_name" placeholder="请填写名称" value=""
					class="input-text" style="width: 80%">
			</div>
		</div>
		<br>
		<div class="row cl">

			<label class="form-label col-2">分类：</label>
			<div class="formControls col-10">
				<select id="ctg_id" name="ctg_id" class="input-text" style="width: 80%">

					<c:forEach items="${category}" var="pctg">
						<c:if test="${pctg.parent_id==null}">
							<option disabled value="${pctg.ctg_id}">${pctg.ctg_name }</option>
						</c:if>
						
						<c:forEach items="${category}" var="cctg">
							<c:if test="${cctg.parent_id==pctg.ctg_id}">
								<option value="${cctg.ctg_id}">|---${cctg.ctg_name }</option>
							</c:if>

						</c:forEach>
					</c:forEach>

					<%-- 	<c:forEach items="${category}" var="ctg">
						<c:if test="${list.ctg_id!=ctg.ctg_id}"><option value="${ctg.ctg_id}">${ctg.ctg_name }</option></c:if>
						</c:forEach> --%>
				</select>
			</div>
		</div>
		<br>
		<div class="row cl">
			<label class="form-label col-2">图片：</label>
			<div class="formControls col-10">
				<input type="file" id="file" name="file" value="" class="input-text"
					style="width: 80%" onchange="imageview()">
			</div>
		</div>
		<br>
		<div class="row cl">
			<label class="form-label col-2"> </label> <input id="filepath"
				type="hidden">
			<div class="formControls col-10" id="img">
				<img id="upimage" style="width:100px;height:100px"/>
			</div>
		</div>
		<br>
		<div class="row cl">

			<label class="form-label col-2">规格：</label>
			<div class="formControls col-10">
				<input type="text" id="goods_spe" name="goods_spe" placeholder="请填写规格" value=""
					class="input-text" style="width: 80%">
			</div>
		</div>
		<br>

		<div class="row cl">

			<label class="form-label col-2">价格：</label>
			<div class="formControls col-10">
				<input type="text" id="goods_price" name="goods_price" placeholder="请填写价格" value=""
					class="input-text" style="width: 80%">
			</div>
		</div>
		<br>
		<div class="row cl">

			<label class="form-label col-2">卡路里：</label>
			<div class="formControls col-10">
				<input type="text" id="goods_kaluli" name="goods_kaluli" placeholder="请填写卡路里" value=""
					class="input-text" style="width: 80%">
			</div>
		</div>
		<br>
		<div class="row cl">

			<label class="form-label col-2">数量：</label>
			<div class="formControls col-10">
				<input type="text" id="goods_num" name="goods_num" value="999"
					class="input-text" style="width: 80%">
			</div>
		</div>
		<br>
		<div class="row cl">

			<label class="form-label col-2">是否推荐：</label>
			<div id="is_recommend" class="formControls col-10" style="width:10%">
				<input type="checkbox" name="is_recommend" value="1" >
			</div>
		</div>
		<br>
		<div class="row cl">

			<label class="form-label col-2">详情：</label>
			<div class="formControls col-10">
				<textarea name="goods_detail" id="goods_detail"
					style="width: 80%;height: 260px;"></textarea>
			</div>
		</div>
		<br> <br>
		<div class="col-10 col-offset-2">

			<button onClick="add()" id="butt" class="btn btn-primary radius"
				type="button">
				<i class="Hui-iconfont">&#xe632;</i> 提交
			</button>
			<button onClick="history.go(-1);" class="btn btn-default radius"
				type="button">&nbsp;&nbsp;返回&nbsp;&nbsp;</button>
		</div>
		</form>
	</div>
	<br>
	<br>
	<script type="text/javascript">
	
		function imageview(){
			var imgPath = document.getElementById("file");//上传图片的id
			var stuImg = document.getElementById("upimage");//显示图片的id
			
			//URL对象是硬盘（SD卡等）指向文件的一个路径，获得一个http格式的url路径
			var path=window.URL.createObjectURL(imgPath.files.item(0));//数据格式为blob二进制数据
			//把新的url给预留好的图片标签
			stuImg.src=path;
			// document.images[0].src=path;//document.images文档所有图片集合
			//地址清空
			stuImg.onload = function(){
			    window.URL.revokeObjectURL(path);
			};
		}
		function add() {
		var uploadFile = new FormData($("#form")[0]);
		console.log(uploadFile);
		if("undefined" != typeof(uploadFile) && uploadFile != null && uploadFile != ""){
			$.ajax({
				url:'goodsInsert.html',
				type:'POST',
				data:uploadFile,
				async: false,  
				cache: false, 
				contentType: false, //不设置内容类型
				processData: false, //不处理数据
				success:function(data){
					console.log(data);
					alert("添加成功");
					window.location.href="goodsList.html?status=1";
				},
				error:function(){
					alert("上传失败！");
				}
			})
		}else {
			alert("选择的文件无效！请重新选择");
		}
			//分界线
			/* var goods_name = $('#goods_name').val();
			var ctg_id = $('#ctg_id').val();
			var goods_spe = $('#goods_spe').val();
			var goods_img = $('#filepath').val();
			var goods_price = $('#goods_price').val();
			var goods_detail = $('#goods_detail').val();
	
			$.ajax({
				url : 'goodsInsert.html',
				type : 'post',
				data : 'goods_name=' + encodeURI(goods_name) + '&ctg_id=' + ctg_id + '&goods_img=' + goods_img + '&goods_spe=' + goods_spe
					+ '&goods_price=' + goods_price + '&goods_detail=' + goods_detail,
				success : function(rs) {
					if (rs == 1) {
	
						alert("添加成功！");
						window.location.href = document.referrer;
					} else {
	
						alert("添加失败！");
					}
				}
			}) */
		}
		function upload() {
			var fp = document.getElementById("file").value;
			//为了避免转义反斜杠出问题，这里将对其进行转换
	
			var re = /(\\+)/g;
			var fn = fp.replace(re, "#");
			//对路径字符串进行剪切截取
			var one = fn.split("#");
			//获取数组中最后一个，即文件名
			var two = one[one.length - 1];
			//再对文件名进行截取，以取得后缀名
			var three = two.split(".");
			//获取截取的最后一个字符串，即为后缀名
			var last = three[three.length - 1];
			last = last.toLowerCase();
	
			if (last != 'png' && last != 'jpg' && last != 'gif'
				&& last != 'PNG' && last != 'JPG' && last != 'GIF') {
				alert("请上传png、jpg或者gif文件！");
				return;
			}
			$.ajaxFileUpload({
				url : 'upload.html', //需要链接到服务器地址  
				secureuri : false,
				fileElementId : "file", //文件选择框的id属性  
				dataType : 'text', //服务器返回的格式，可以是json  
				success : function(rs) //相当于java中try语句块的用法  
				{
					if (rs != "") {
						$('#img').html("");
						$('#img').append("<img src='" + rs + "' width='100' height='100'>");
						$('#filepath').val(rs);
					} else {
						alert('失败');
					//document.getElementById("msg"+m[1]).value="失败"; 
					}
				},
				error : function(data, status, e) //相当于java中catch语句块的用法  
				{
					alert('失败');
	
				}
			});
		}
	</script>

</body>
</html>